<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>pixi learn 1</title>
  <style>
    body {
      margin: 0;
    }
    canvas {
      display: block;
      background: blue;
    }
  </style>
</head>
<body>
<canvas id="mycanvas"></canvas>
<script src="../lib/pixi.js"></script>
<script type="text/javascript">
  const canvas = document.getElementById('mycanvas')
  const app = new PIXI.Application({
    view: canvas,
    width: window.innerWidth,
    height: window.innerHeight
  })
  console.log(PIXI.utils.TextureCache)

  let loader = PIXI.Loader.shared
  loader.add('../assets/bunny.png')
    .add('../assets/24-pineapple-fruit-png-image.png')
  // .on('progress', handleLoadProgress)
  // .on('load', handleLoadAsset)
  // .on('error', handleLoadError)
  .load(handleLoadComplete)

  // loader.add('../assets/bunny.png')
  // loader.load()

  let img
  function handleLoadProgress(loader, resource) {
    console.log(loader.progress + '% loaded')
  }

  function handleLoadAsset(loader, resource) {
    console.log('asset loaded' + resource.name)
  }
  function handleLoadError() {
    console.log('load error')
  }
  function handleLoadComplete() {
    let texture = loader.resources['../assets/bunny.png'].texture
    img = new PIXI.Sprite(texture)
    img.anchor.x = 0.5
    img.anchor.y = 0.5
    app.stage.addChild(img)
    app.ticker.add(animate)

    setTimeout(() => {
      img.texture = loader.resources['../assets/24-pineapple-fruit-png-image.png'].texture
    }, 2000)
  }

  function animate() {
    img.x = app.renderer.screen.width / 2
    img.y = app.renderer.screen.height / 2
    img.rotation += 0.01
  }

</script>
</body>
</html>
